<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @click="navigateBack">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="title">添加车辆</view>
      <view class="right">
        <uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
      </view>
    </view>
    
    <view class="bg"></view>
    
    <!-- 表单内容 -->
    <view class="form-content">
      <!-- 顶部图片 -->
      <image class="top-image" src="/static/yhj/carbg.jpg" mode="aspectFit"></image>
      
      <!-- 表单项 -->
      <view class="form-item">
        <view class="label">车辆类型</view>
        <picker @change="onTypeChange" :value="formData.type" :range="carTypes">
          <view class="picker-content">
            {{ formData.type || '请选择' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <view class="label">车辆型号</view>
        <picker @change="onModelChange" :value="formData.model" :range="carModels">
          <view class="picker-content">
            {{ formData.model || '请选择' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <view class="label">车牌号码</view>
        <input 
          class="input-content"
          v-model="formData.plateNumber"
          placeholder="请输入您的车牌号"
        />
      </view>
      
      <view class="form-item">
        <view class="label">车主姓名</view>
        <input 
          class="input-content"
          v-model="formData.ownerName"
          placeholder="请输入您的姓名"
        />
      </view>
      
      <view class="form-item">
        <view class="label">电话号码</view>
        <input 
          class="input-content"
          v-model="formData.phone"
          type="number"
          placeholder="请输入您的手机号"
        />
      </view>
      
      <view class="form-item">
        <view class="label">照片</view>
        <view class="upload-box" @click="chooseImage">
          <image 
            v-if="formData.image" 
            :src="formData.image" 
            mode="aspectFill"
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="plus">+</text>
            <text>上传车辆照片</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <button class="submit-btn" @click="submitForm">
        <text>确认添加</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 响应式数据
const carTypes = ref(['轿车', 'SUV', '新能源车', '商务车']);
const carModels = ref(['宝马', '奔驰', '奥迪', '大众']);
const formData = ref({
  type: '',
  model: '',
  plateNumber: '',
  ownerName: '',
  phone: '',
  image: ''
});

// 方法定义
const navigateBack = () => {
  uni.navigateBack();
};

const onTypeChange = (e) => {
  formData.value.type = carTypes.value[e.detail.value];
};

const onModelChange = (e) => {
  formData.value.model = carModels.value[e.detail.value];
};

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      formData.value.image = res.tempFilePaths[0];
    }
  });
};

const submitForm = () => {
  // 表单验证
  if (!formData.value.type) {
    uni.showToast({ title: '请选择车辆类型', icon: 'none' });
    return;
  }
  
  if (!formData.value.model) {
    uni.showToast({ title: '请选择车辆型号', icon: 'none' });
    return;
  }
  
  if (!formData.value.plateNumber) {
    uni.showToast({ title: '请输入车牌号码', icon: 'none' });
    return;
  }
  
  if (!formData.value.ownerName) {
    uni.showToast({ title: '请输入车主姓名', icon: 'none' });
    return;
  }
  
  if (!formData.value.phone) {
    uni.showToast({ title: '请输入电话号码', icon: 'none' });
    return;
  }
  
  // 提交表单逻辑
  uni.showLoading({ title: '提交中...' });
  
  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading();
    uni.navigateTo({
      url: '/pages/mycar/success'
    });
    
    // 实际开发中可以在这里调用API
    // uni.request({
    //   url: 'your-api-url',
    //   method: 'POST',
    //   data: formData.value,
    //   success: (res) => {
    //     // 处理成功逻辑
    //   }
    // });
  }, 1500);
};

// 生命周期钩子
onLoad(() => {
  // 可以在这里初始化数据
});
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 100px;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #007AFF;
  color: #fff;
  padding: 0 15px;
}

.nav-bar .back, 
.nav-bar .right {
  width: 44px;
}

.nav-bar .title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.nav-bar .right {
  text-align: right;
}

.bg {
  width: 100%;
  height: 250rpx;
  background-color: #007AFF;
}

.form-content {
  margin: 10px 10px 0;
  margin-top: -200rpx;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  background-color: #fff;
}

.form-content .top-image {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.form-item {
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.form-item .label {
  display: inline-block;
  padding: 6px 15px;
  background-color: #007AFF;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 10px;
}

.form-item .picker-content,
.form-item .input-content {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0 15px;
  background-color: #f5f5f5;
  border-radius: 22px;
  font-size: 14px;
  color: #333;
}

.form-item .picker-content::placeholder,
.form-item .input-content::placeholder {
  color: #999;
}

.form-item .upload-box {
  width: 120px;
  height: 120px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-item .upload-box .preview-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.form-item .upload-box .upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.form-item .upload-box .upload-placeholder .plus {
  font-size: 24px;
  margin-bottom: 5px;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.bottom-btn .submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  background-color: #007AFF;
  color: #fff;
  border-radius: 22px;
  font-size: 16px;
}

.bottom-btn .submit-btn:active {
  opacity: 0.8;
}
</style>